<template>
  <div class="home-wrap" :class="{ 'lang-en': $i18n.locale === 'en' }">
    <div class="home-head-wrap">
      <div class="home-head-content-wrap">
        <p class="home-head-title">
          {{ $t("当健康陷入困境，希望从这里开始") }}
        </p>
        <p>{{ $t("当身体的健康出现风险，") }}</p>
        <p>{{ $t("当疾病的困扰无法摆脱，") }}</p>
        <p style="margin-bottom: 1.33rem">{{ $t("当健康已经无路可走，") }}</p>
        <p>{{ $t("此刻，你需要一个新的方案。") }}</p>
        <p v-if="$i18n.locale === 'zh'">{{ $t("在Rebirthealth，发布你的健康诉求，汇聚全球智慧，找到属于你的解决方案。") }}</p>
        <p v-if="$i18n.locale === 'en'">
          {{ $t("在Rebirthealth，发布你的健康诉求，") }}
        </p>
        <p v-if="$i18n.locale === 'en'">
          {{ $t("汇聚全球智慧，找到属于你的解决方案。") }}
        </p>
        <p>{{ $t("我们相信，希望从未消失，只是需要被重新点亮") }}</p>
        <div class="input-box">
          <el-input :placeholder="$t('如果有疑问，可以在此发布任务！')" v-model="rewardTitle"></el-input>
          <button class="my-button" ref="bountyBtn" @click="handleReward">

            {{ $t("悬赏求助") }}
          </button>
        </div>
        <div class="tag-list">
          <span class="tag" v-for="(item, index) in tagList" :key="index"
            @click="$router.push(`successDetail?caseId=${item.caseId}`)">{{ item.title }}</span>
        </div>
      </div>
    </div>
    <div class="home-run-wrap">
      <div class="home-run-content-wrap">
        <div class="home-title-wrap">
          <p class="home-title">{{ $t("运作方式") }}</p>
        </div>
        <div class="run-content-wrap">
          <div class="run-content-tab">
            <div class="tab-item" :class="{ active: acRun === index }" v-for="(item, index) in translatedrunList"
              :key="index" @mouseenter="acRun = index">
              <img :src="item.icon" alt="" />
              <p>{{ item.name }}</p>
              <div class="line-box"></div>
            </div>
          </div>
          <div class="content-wrap" :style="{ backgroundImage: `url(${translatedrunList[acRun].bg})` }">
            <p>{{ translatedrunList[acRun].name }}</p>
            <p>{{ translatedrunList[acRun].content1 }}</p>
            <p>{{ translatedrunList[acRun].content2 }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="home-team-wrap">
      <div class="home-team-content-wrap">
        <div class="home-title-wrap">
          <p class="home-title">{{ $t("评审团队") }}</p>
          <p class="team-explain">
            {{ $t("homeInfo") }}
          </p>
        </div>
        <div class="team-list-wrap">
          <div class="team-tab-list">
            <div class="team-tab" :class="{ active: acTeam === index }" v-for="(item, index) in translatedteamList"
              :key="index" @mouseenter="acTeam = index">
              {{ item.name }}
            </div>
          </div>
          <div class="team-content">
            <p class="team-title">{{ $t("背景") }}</p>
            <p class="team-text">{{ translatedteamList[acTeam].info1 }}</p>
            <p class="team-title" style="margin-top: 3.56rem"
              :style="$i18n.locale === 'en' ? 'margin-top: 2.16rem' : ''">
              {{ $t("能力") }}
            </p>
            <p class="team-text">{{ translatedteamList[acTeam].info2 }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="home-reason-wrap">
      <div class="home-reason-content-wrap">
        <div class="home-title-wrap">
          <p class="home-title">{{ $t("为什么要选择Rebirthealth") }}</p>
        </div>
        <div class="home-reason-list">
          <div class="reason-item" :class="{
            active: acReason === index,
            noactive: acReason !== index,
          }" v-for="(item, index) in translatedreasonList" :key="index" @mouseenter="acReason = index">
            <p class="reason-title">{{ item.name }}</p>
            <p v-if="acReason === index" class="reason-text">{{ item.info }}</p>
            <img class="icon" :src="item.icon" alt="" />
            <div class="jiantou"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-feedback-wrap">
      <div class="home-feedback-content-wrap">
        <div class="home-title-wrap">
          <p class="home-title home-title1">{{ $t("来自1000万会员的真实反馈") }}</p>
        </div>
        <!-- <div class="swiper-container2">
          <div class="swiper-wrapper">
            <div class="home-feedback-list swiper-slide" v-for="(item, index) in feedbackList" :key="index">
              <div class="feedback-item" v-for="(citem, cindex) in item" :key="cindex">
                <img src="../../assets/img/head.jpg" alt="" />
                <div class="info">
                  <p>{{ $t("法海你不懂爱") }}</p>
                  <p>
                    {{ citem.value }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div> -->
        <div class="my-pagination-wrap swiper-pagination2"></div>
        <vue-danmaku v-model="feedbackList" style="height:350px; width:100%" use-slot randomChannel loop :speeds="100"
          :channels="4" :debounce="100">
          <template slot="dm" slot-scope="{ index, danmu }">
            <div class="feedback-item">
              <img src="../../assets/img/head.jpg" alt="" />
              <div class="info">
                <p>{{ $t("法海你不懂爱") }}</p>
                <p>
                  {{ danmu.value }}{{ index }}
                </p>
              </div>
            </div>
          </template>
        </vue-danmaku>
      </div>

    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import api from "@/api/success";
import vueDanmaku from 'vue-danmaku'
export default {
  components: {
    vueDanmaku
  },
  data() {
    return {
      feedbackList: [

        {
          value: this.$t(
            "疗程一:疗程内容疗程内容疗程内容疗程内容疗程内容疗程内容程内容程内容程内容疗程内容疗程内"
          ),
        },
        {
          value: this.$t(
            "疗程一:疗程内容疗内容疗程程内容疗程内容疗程内容疗程内容疗程内容疗程内容疗内容疗程内容疗程内容疗程内"
          ),
        },
        {
          value: this.$t(
            "疗程一:疗程内容疗程内容疗程内容疗程内容疗程内容疗程内容疗程内容疗程内"
          ),
        },
        {
          value: this.$t(
            "疗程一:疗程内容疗程内程内容疗程内容疗程内容疗程内容疗程内"
          ),
        },
        {
          value: this.$t(
            "疗程一:疗程内容疗程内容疗程内容疗程内容疗程内容内容疗程内疗程内容疗程内容疗程内"
          ),
        },
        {
          value: this.$t(
            "疗程一:疗程内容疗程内容疗程容疗程内容疗程内容疗程内容疗程内"
          ),
        },
        {
          value: this.$t(
            "疗程一:疗程内容疗程内容疗程内容疗程内容疗程内容疗程内内容疗程内"
          ),
        },
        {
          value: this.$t(
            "疗程一:疗程内容疗程内容疗程内容疗程内内容疗程内容疗程内容疗程内容疗程内容疗程内"
          ),
        },

        {
          value: this.$t(
            "疗程一:疗程内容疗程内容疗程内容疗程内容疗程内容疗程内容程内容程内容程内容疗程内容疗程内"
          ),
        },
        {
          value: this.$t(
            "疗程一:疗程内容疗内容疗程程内容疗程内容疗程内容疗程内容内容疗程内容疗程内容疗程内"
          ),
        },
        {
          value: this.$t(
            "疗程一:疗程内容疗程内容疗程内容疗程内容疗程内容疗程内容疗程内容疗程内"
          ),
        },
        {
          value: this.$t(
            "疗程一:疗程内容疗程内程内容疗程内容疗程内容疗程内容疗程内"
          ),
        },
        {
          value: this.$t("疗程一:疗程内容疗程内容疗程内容疗程内容疗程内"),
        },
        {
          value: this.$t(
            "疗程一:疗程内容疗程内容疗程容疗程内容疗程内容疗程内容疗程内"
          ),
        },
        {
          value: this.$t(
            "疗程一:疗程内容疗程内容疗程内容疗程内容疗程内容疗容疗程内程内内容疗程内容疗程内容疗程内"
          ),
        },
        {
          value: this.$t(
            "疗程一:疗程内容疗程内容疗程内容疗程内内容疗程内容疗程内容疗程内容疗程内容疗程内"
          ),
        },
        {
          value: this.$t(
            "疗程一:疗程内容疗内容疗程程内容疗程内容疗程内容疗程内容内容疗程内容疗程内容疗程内"
          ),
        },
        {
          value: this.$t(
            "疗程一:疗程内容疗程内容疗程内容疗程内容疗程内容疗程内容疗程内容疗程内"
          ),
        },
        {
          value: this.$t(
            "疗程一:疗程内容疗程内程内容疗程内容疗程内容疗程内容疗程内"
          ),
        },
        {
          value: this.$t("疗程一:疗程内容疗程内容疗程内容疗程内容疗程内"),
        },
        {
          value: this.$t(
            "疗程一:疗程内容疗程内容疗程容疗程内容疗程内容疗程内容疗程内"
          ),
        },
        {
          value: this.$t(
            "疗程一:疗程内容疗程内容疗程内容疗程内容疗程内容疗容疗程内程内内容疗程内容疗程内容疗程内"
          ),
        },
        {
          value: this.$t(
            "疗程一:疗程内容疗程内容疗程内容疗程内内容疗程内容疗程内容疗程内容疗程内容疗程内"
          ),
        },
      ],
      runList: [
        {
          icon: require("../../assets/img/rectangle9.png"),
          bg: require("../../assets/img/run1.png"),
          name: "发布诉求，汇聚全球智慧资源",
          content1: "无论面临何种健康问题，均可通过本平台发布任务需求。来自全球各领域的顶尖专业人员、非物质文化遗产传承人、资深民间学者以及掌握特殊技艺的工匠大师，将共同参与，为需求者提供专业化、个性化的经验分享与解决方案。",
          content2:
            "这些具有多元文化背景和专业特长的专家团队，将充分发挥其深厚的专业素养与丰富的实践经验，从传统工艺的传承创新、特殊技能的传授应用，到跨文化视角下的经验交流，为需求提供全方位、高质量的专业方案。",
        },
        {
          icon: require("../../assets/img/rectangle7.png"),
          bg: require("../../assets/img/run2.png"),
          name: "专业评审，量身定制方案，全程防控",
          content1:
            "承接人将紧密结合需求者的个性化需求，通过系统梳理健康档案与调查问卷，全面掌握基础数据与预期目标。基于专业视角和行业经验，承接人将进行科学研判、合理规划，精准制定契合实际的专项方案。从方案设计到实施反馈，全过程严格遵循标准化服务流程，确保方案既具备专业水准又具有可操作性。",
          content2:
            "方案评审采用分级审核制度。首先由责任人员开展初步审核与自评互评，随后组织相关领域专家对入围方案进行综合评审，重点围绕可行性、科学性及创新性等核心指标开展量化评估，确保方案质量达到既定标准要求。",
        },
        {
          icon: require("../../assets/img/rectangle8.png"),
          bg: require("../../assets/img/run3.png"),
          name: "全程跟踪，确保任务完成",
          content1:
            "我们为需求者提供从任务发布到方案最终执行的全程跟踪服务，确保每个环节均有专业团队紧密跟进与规范处理。借助完善的进度监控机制，专业团队能够实时掌握任务进展情况，及时发现并化解潜在风险，有效保障项目按时高质量完成。",
          content2: "在服务过程中，我们始终将需求者的健康安全置于首要位置，严格落实各项健康管理措施，为需求者提供安全可靠的服务保障。工作任务的圆满完成以及需求者的身心健康状况，均为我们重点关注的内容。 ",
        },
      ],
      acRun: 0,
      reasonList: [
        {
          icon: require("../../assets/img/why1.png"),
          name: "资金平台担保",
          info: this.$t("homeInfo15"),
        },
        {
          icon: require("../../assets/img/why2.png"),
          name: "10000+奇人异士",
          info: this.$t("homeInfo16"),
        },
        {
          icon: require("../../assets/img/why3.png"),
          name: "量身定制服务",
          info: this.$t("homeInfo17"),
        },
        {
          icon: require("../../assets/img/why4.png"),
          name: "平台全程跟踪",
          info: this.$t("homeInfo18"),
        },
      ],
      acReason: 0,
      teamList: [
        {
          name: "非遗传承人",
          info1: this.$t("homeInfo1"),
          info2: this.$t("homeInfo2"),
        },
        {
          name: "道家医者",
          info1: this.$t("homeInfo3"),
          info2: this.$t("homeInfo4"),
        },
        {
          name: "道家通灵人",
          info1: this.$t("homeInfo5"),
          info2: this.$t("homeInfo6"),
        },
        {
          name: "佛门健康智慧",
          info1: this.$t("homeInfo9"),
          info2: this.$t("homeInfo10"),
        },
        {
          name: "苗族传统智慧",
          info1: this.$t("homeInfo7"),
          info2: this.$t("homeInfo8"),
        },
        {
          name: "民间经验传承人",
          info1: this.$t("homeInfo11"),
          info2: this.$t("homeInfo12"),
        },
        {
          name: "藏族传统智慧传承者",
          info1: this.$t("homeInfo13"),
          info2: this.$t("homeInfo14"),
        },
      ],
      acTeam: 0,
      mySwiper: null,
      mySwiper2: null,
      tagList: [],
      rewardTitle: "",
    };
  },
  computed: {
    translatedrunList() {
      return this.runList.map((item) => ({
        ...item,
        name: this.$t(item.name),
        content1: this.$t(item.content1),
        content2: this.$t(item.content2),
      }));
    },
    translatedreasonList() {
      return this.reasonList.map((item) => ({
        ...item,
        name: this.$t(item.name),
      }));
    },
    translatedteamList() {
      return this.teamList.map((item) => ({
        ...item,
        name: this.$t(item.name),
      }));
    },
  },
  mounted() {
    if (this.$i18n.locale === 'en') {
      this.runList[0].bg = require("../../assets/img/run1-en.png")
    }
    // this.initSwiper2();
    this.getTop5();
    //  // 根据当前语言动态调整样式
    //   const btn = this.$refs.bountyBtn; // 通过$refs获取按钮DOM
    //   switch (this.$i18n.locale) {
    //     case 'en': // 英文
    //       btn.style.fontSize = '1.2rem';    // 缩小字体
    //       btn.style.letterSpacing = '-0.05rem'; // 字符间距负值（紧凑）
    //       btn.style.lineHeight = '1.1';     // 缩小行高
    //       break;
    //     case 'zh': // 中文
    //     default:   // 其他语言默认中文样式
    //       btn.style.fontSize = '1.2rem';
    //       btn.style.letterSpacing = '0';
    //       btn.style.lineHeight = '1.2';
    //   }
  },
  beforeDestroy() {
    if (this.mySwiper) {
      this.mySwiper.destroy();
    }
    if (this.mySwiper2) {
      this.mySwiper2.destroy();
    }
  },
  methods: {
    async getTop5() {
      let res = await this.$http.get(api.getList, {
        params: {
          orderBy: "seq",
          pageSize: 5,
        },
      });
      if (res && res.code == 0) {
        this.tagList = res.data.list;
      } else {
        this.$message.error(res.msg || this.$t("网络错误"));
      }
    },
    handleReward() {
      this.$router.push(`/reward?title=${this.rewardTitle}`);
    },
    initSwiper2() {
      this.mySwiper = new Swiper(".swiper-container2", {
        pagination: {
          el: ".swiper-pagination2",
          // 分页器类型：'bullets' | 'fraction' | 'progressbar' | 'custom'
          type: "bullets",
          clickable: true, // 允许点击分页器切换
        },
        // 配置选项
        loop: true,
        autoplay: {
          delay: 10 * 1000,
          disableOnInteraction: false,
        },
        slidesPerView: 1,
        slidesPerGroup: 1,
        spaceBetween: "3%",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.home-wrap {
  background: linear-gradient(180deg, #152d57 0%, #7aa9ff 100%);
  margin-top: -8.89rem;
  padding-bottom: 8.56rem;

  .home-head-wrap {
    padding-top: 12.5rem;
    background-image: url("../../assets/img/frame1.png");
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 48.61rem;

    .home-head-content-wrap {
      width: 66.72rem;
      margin: 0 auto;

      p {
        font-size: 1rem;
        color: #fff;
        line-height: 1.56rem;
      }

      .home-head-title {
        background: linear-gradient(88.82066547067191deg,
            #ffffff 0%,
            #0085ff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        // color: linear-gradient(88.82066547067191deg, #FFFFFF 0%, #0085FF 100%);
        font-weight: bold;
        font-size: 2.67rem;
        line-height: 2.67rem;
        letter-spacing: 1px;
        margin-bottom: 1.33rem;
      }

      .input-box {
        display: flex;
        margin-top: 3.61rem;

        .my-button {
          width: 12rem;
          height: 4.67rem;
          font-size: 1.2rem;
          background: linear-gradient(270deg, #6e55f6 0%, #2e44f5 100%);
          box-shadow: 0rem 0.11rem 0.22rem 0rem #131e32;
          border-radius: 0.22rem 0.22rem 0.22rem 0.22rem;
          border: 0.06rem solid rgba(251, 251, 251, 0.65);
          white-space: nowrap;
          /* 禁止文本换行 */
          overflow: hidden;
        }
      }

      .tag-list {
        margin-top: 0.89rem;

        .tag {
          cursor: pointer;
          padding: 0.22rem 0.56rem;
          font-size: 1rem;
          color: #c3d4ff;
          line-height: 1.89rem;
          background: rgba(110, 85, 246, 0.15);
          border-radius: 0.11rem 0.11rem 0.11rem 0.11rem;
          border: 0.06rem solid rgba(255, 255, 255, 0.1);
          margin-right: 0.44rem;
        }
      }
    }
  }

  .home-title-wrap {
    background: url("../../assets/img/xinxin.png") no-repeat 22.39rem 0 / 14.56rem 15.72rem;
    padding: 6.11rem 0 2.67rem 0;
  }

  .home-title {
    font-weight: bold;
    font-size: 2.67rem;
    color: #ffffff;
    line-height: 2.67rem;
    letter-spacing: 1px;
    text-align: center;
  }

  .my-pagination-wrap {
    margin-top: 1.33rem;
    text-align: center;
    width: 100%;

    ::v-deep .swiper-pagination-bullet {
      width: 0.56rem;
      height: 0.22rem;
      background: rgba(255, 255, 255, 0.65);
      border-radius: 0.44rem 0.44rem 0.44rem 0.44rem;
      margin-right: 0.22rem;
    }

    ::v-deep .swiper-pagination-bullet-active {
      width: 1.11rem;
      background: linear-gradient(90deg, #0085ff 0%, #88c6ff 100%);
      border-radius: 0.22rem 0.22rem 0.22rem 0.22rem;
    }
  }

  .home-run-wrap {
    .home-run-content-wrap {
      //padding-top: 5.78rem;
      width: 100%;
    }

    .run-content-wrap {
      display: flex;

      .content-wrap {
        flex: 1;
        padding: 2.67rem 12rem 2.67rem 3.11rem;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100% 100%;
        height: 31rem;
        color: #fff;

        p:nth-child(1) {
          font-weight: bold;
          font-size: 1.78rem;
          margin-bottom: 1.33rem;
        }

        p {
          font-size: 1.13rem;
          line-height: 2.67rem;
        }
      }
    }

    .tab-item {
      margin-right: 1.33rem;
      width: 15.67rem;
      height: 10.22rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      background: rgba(13, 27, 39, 1);

      &.active {
        background-image: linear-gradient(270deg, #6e55f6 0%, #2e44f5 100%);
        border-radius: 0.22rem 0.22rem 0.22rem 0.22rem;
      }

      img {
        width: 4.89rem;
        height: 4.89rem;
        margin-bottom: 0.67rem;
      }

      p {
        font-size: 0.89rem;
        color: #ffffff;
        text-align: center;
      }

      .line-box {
        position: absolute;
        width: 14.33rem;
        height: 0.06rem;
        background-image: linear-gradient(90deg,
            rgba(4, 95, 178, 0),
            rgba(4, 95, 178, 1),
            rgba(4, 95, 178, 0));
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }

  .home-team-wrap {
    .home-team-content-wrap {
      width: 100%;

      .team-explain {
        padding: 1.33rem 13.56rem 0;
        font-size: 1.2rem;
        color: #ffffff;
        line-height: 1.4rem;
        text-align: justify;
      }

      .team-list-wrap {
        display: flex;
        background: url("../../assets/img/content-bg1.png");
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100% 100%;
        height: 38.11rem;
      }

      .team-tab-list {
        margin: 2.67rem 0 0 5.39rem;
        border-right: 0.06rem solid;
        border-image: linear-gradient(to bottom,
            rgba(230, 230, 230, 0.65),
            rgba(8, 137, 255, 0)) 1;

        .team-tab {
          width: 20.67rem;
          height: 3.56rem;
          line-height: 3.56rem;
          text-align: center;
          border-top: none;
          border-right: none;
          border-bottom: none;
          font-weight: bold;
          font-size: 1rem;
          color: #ffffff;

          &.active {
            background: linear-gradient(270deg,
                #425f9b 0%,
                rgba(69, 92, 139, 0) 100%);
            border-left: 0.22rem solid;
            border-image: linear-gradient(to bottom, #0085ff 0%, #88c6ff 100%) 1;
          }
        }
      }

      .team-content {
        padding: 1.89rem 4.44rem 1rem 4.44rem;
      }

      .team-title {
        width: fit-content;
        font-weight: bold;
        font-size: 1rem;
        color: #ffffff;
        margin-bottom: 1rem;
        border-bottom: 0.22rem solid;
        border-image: linear-gradient(to right, #0085ff 0%, #88c6ff 100%) 1;
      }

      .team-text {
        font-size: 1rem;
        color: #ffffff;
        line-height: 2.4rem;
      }
    }
  }

  .home-reason-wrap {
    .home-reason-content-wrap {
      width: 100%;
    }

    .home-reason-list {
      width: 100%;
      height: 26.67rem;
      display: flex;
      justify-content: space-between;
    }

    .reason-item {
      .reason-title {
        font-size: 0.78rem;
        color: #ffffff;
        font-weight: bold;
      }

      .jiantou {
        width: 2.33rem;
        height: 2.33rem;
        border-radius: 1.5rem;
        border: 0.06rem solid #ffffff;
        background: url("../../assets/img/jiantou2.png") no-repeat center center / 1.11rem 1.11rem;
      }

      &.noactive {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 11.11rem;
        height: 26.67rem;
        padding: 2.67rem 0;
        background: url("../../assets/img/why-bg1.png") no-repeat center center / 100% 100%;

        .icon {
          width: 3.56rem;
          height: 3.56rem;
        }
      }

      &.active {
        width: 44rem;
        height: 26.67rem;
        padding: 1.67rem;
        background: url("../../assets/img/why-bg.png") no-repeat center center / 100% 100%;

        .reason-title {
          border-bottom: 0.22rem solid;
          border-image: linear-gradient(to right, #0085ff 0%, #88c6ff 100%) 1;
          width: fit-content;
        }

        .reason-text {
          font-size: 1rem;
          color: #ffffff;
          line-height: 1.78rem;
          text-align: justify;
          margin-top: 2.28rem;
        }

        .icon {
          width: 8.61rem;
          height: 8.61rem;
          position: absolute;
          right: 5.56rem;
          bottom: 3.56rem;
          opacity: 0.3;
        }

        .jiantou {
          position: absolute;
          left: 2.67rem;
          bottom: 2.67rem;
        }
      }
    }
  }

  .home-feedback-wrap {
    .home-feedback-content-wrap {
      width: 100%;
    }

    .swiper-container2 {
      width: 66.72rem;
      margin: 0 auto;
    }

    .feedback-item {
      width: fit-content;
      background: rgba(68, 104, 163, 1);
      display: inline-block;
      margin-right: 0.89rem;
      padding: 0.44rem 0.94rem 0 0.94rem;
      margin-bottom: 0.94rem;

      &:nth-child(4n + 3) {
        margin-left: 1.83rem;
      }

      img {
        width: 1.56rem;
        height: 1.56rem;
        margin-right: 0.89rem;
        border-radius: 1rem;
        overflow: hidden;
        vertical-align: top;
      }

      .info {
        display: inline-block;

        p {
          font-size: 0.67rem;
          color: #ffffff;
          letter-spacing: 1px;
          max-width: 25.56rem;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        p:nth-child(1) {
          font-weight: bold;
          font-size: 0.78rem;
          margin-bottom: 0.22rem;
        }
      }
    }
  }
}

.lang-en {
  background: linear-gradient(180deg, rgba(15, 36, 74, 1) 0%, rgba(54, 85, 140, 1) 100%);

  .home-run-wrap .run-content-wrap .content-wrap.content-wrap {
    p {
      line-height: 1.5rem !important;
    }
  }

  /* 提升选择器优先级 */
  .home-team-wrap .home-team-content-wrap .team-text {
    line-height: 1.4rem !important;
  }

  .home-head-title {
    font-size: 2.71rem !important;
    line-height: 3.43rem !important;
  }

  &.home-wrap .home-head-wrap .home-head-content-wrap p {
    line-height: 1.71rem;
    font-size: 1.29rem;
  }

  &.home-wrap .home-head-wrap .home-head-content-wrap .input-box .my-button {
    width: 15.43rem;
  }

  &.home-wrap .home-head-wrap .home-head-content-wrap .home-head-title {
    background: linear-gradient(88.82066547067191deg,
        #0085ff 0%,
        #fff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  &.home-wrap .home-title {
    background: linear-gradient(88.82066547067191deg,
        RGBA(9, 137, 255, 1) 0%,
        #fff 70%,
        #fff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: 5.14rem;
    line-height: 5.14rem;

    &.home-title {
      font-size: 3.26rem;
      line-height: 3.26rem;
    }
  }

  &.home-wrap .home-run-wrap .run-content-wrap .content-wrap p {
    &:nth-child(1) {
      font-size: 2.03rem;
      line-height: 2.03rem !important;
      margin-bottom: 1.79rem;
    }

    &:nth-child(2) {
      margin-bottom: 2.43rem;
    }
  }

  &.home-wrap .home-run-wrap .run-content-wrap .content-wrap {
    padding: 3.43rem;
  }

  &.home-wrap .home-team-wrap .home-team-content-wrap .team-tab-list .team-tab.active {
    border: none;
    background: linear-gradient(270deg, rgba(69, 92, 139, 0) 0%, #425F9B 100%);
  }

  &.home-wrap .home-team-wrap .home-team-content-wrap .team-title {
    font-size: 2.43rem;
  }

  &.home-wrap .home-reason-wrap .reason-item.noactive {
    padding: 3rem 1.43rem;
  }

  &.home-wrap .home-team-wrap .home-team-content-wrap .team-list-wrap {
    background: url("../../assets/img/content-bg1-en.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%;
  }

  &.home-wrap .home-reason-wrap .reason-item.active {
    background: url("../../assets/img/why-bg-en.png") no-repeat center center / 100% 100%;
  }
}
</style>
<style lang="scss">
.home-wrap {
  .el-input {
    .el-input__inner {
      &:focus::placeholder {
        color: rgba(255, 255, 255, 0.5);
      }

      width: 53.24rem;
      border: 0.06rem solid;
      border-color: rgba(51, 69, 245, 1);
      background: rgba(0, 0, 0, 0.5);
      height: 4.67rem;
      font-size: 1.33rem;
      color: #fff;
    }
  }
}
</style>
